Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title: {
      type: String,
      value: ''
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      value: '#ffffff'
    },
    // 文字颜色
    textColor: {
      type: String,
      value: '#000000'
    },
    // 是否显示返回按钮
    showBack: {
      type: Boolean,
      value: false
    },
    // 是否显示首页按钮
    showHome: {
      type: Boolean,
      value: false
    },
    // 位置模式：fixed 或 relative
    position: {
      type: String,
      value: 'fixed'
    },
    // 是否使用自定义渲染模式
    customRender: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 导航栏总高度
    navbarHeight: 0,
    // 状态栏高度
    statusBarHeight: 0,
    // 内容区域宽度（排除胶囊区域）
    contentWidth: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 返回上一页
     */
    onBack() {
      this.triggerEvent('back');
    },

    /**
     * 返回首页
     */
    onHome() {
      this.triggerEvent('home');
    },

    /**
     * 获取系统信息
     */
    getSystemInfo() {
      try {
        const systemInfo = wx.getSystemInfoSync();
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        
        // 计算导航栏高度
        const navbarHeight = menuButtonInfo.top + menuButtonInfo.height + 10;
        
        // 计算内容区域宽度（排除胶囊区域）
        const contentWidth = menuButtonInfo.left - 16; // 16px是左边距
        
        this.setData({
          navbarHeight,
          statusBarHeight: systemInfo.statusBarHeight || 0,
          contentWidth
        });
      } catch (error) {
        // 设置默认值
        this.setData({
          navbarHeight: 88,
          statusBarHeight: 44,
          contentWidth: 0
        });
      }
    },

    /**
     * 获取导航栏高度（供外部调用）
     */
    getNavbarHeight() {
      return this.data.navbarHeight;
    },

    /**
     * 获取状态栏高度（供外部调用）
     */
    getStatusBarHeight() {
      return this.data.statusBarHeight;
    }
  },

  /**
   * 组件生命周期
   */
  lifetimes: {
    attached() {
      this.getSystemInfo();
    }
  },

  options:{
    multipleSlots: true
  }
}) 